<template>
  <view class="register">
    <view class="head"> </view>
    <view class="tou"><img src="@/imgs/logo.png" /></view>
    <view class="con">
      <view class="con_01">
        <view class="con_01_l"><uni-icon type="contact" size="25" color="#E5E5E5"></uni-icon></view>
        <view class="con_01_r">
          <input v-model="mobile" class="uni-input" placeholder="请输入手机号" style="height: 35px;background-color: #fff;" />
        </view>
      </view>
      <view class="con_02">
        <view class="con_02_l"><uni-icon type="code" size="25" color="#E5E5E5"></uni-icon></view>
        <view class="con_02_r">
          <input v-model="code" class="uni-input" placeholder="请输入验证码" style="height: 35px;background-color: #fff;" />
        </view>
        <button class="con_02_t" type="default" @click="sendCode" v-if="!counting">{{ counting ? miao + '秒' : '获取验证码' }}</button>
        <button class="con_02_t" type="default" v-if="counting" :disabled="true">{{ miao }}秒</button>
      </view>
      <view class="con_01">
        <view class="con_01_l"><uni-icon type="locked" size="25" color="#E5E5E5"></uni-icon></view>
        <view class="con_01_r">
          <input v-model="password" class="uni-input" type="password" placeholder="请设置密码" style="height: 35px;background-color: #fff;" />
        </view>
      </view>
      <view class="con_04" style="margin-top: 30px;">
        <div class="con_04_1" @click="register">注册</div>
      </view>
      <view class="con_05" style="margin-top: 20px; text-align: center;">
        <text @click="toLogin">已有账号？去登录</text>
      </view>
    </view>
  </view>
</template>

<script>
import uniIcon from "@/components/uni/uni-icon/uni-icon.vue"
export default {
  components: { uniIcon },
  data() {
    return {
      mobile: '',
      code: '',
      password: '',
      counting: false,
      miao: 60
    };
  },
  methods: {
    // 跳转到登录页
    toLogin() {
      uni.navigateTo({
        url: '/pages/login/login'
      });
    },
    // 获取验证码
    sendCode() {
      if (!this.mobile || this.mobile.length !== 11) {
        this.$api.msg('请输入正确的手机号');
        return;
      }
      
      // 调用验证码接口
      this.$api.http.post('/user/sendCode', { mobile: this.mobile })
        .then(res => {
          if (res.status === 1) {
            this.$api.msg('验证码发送成功');
            this.counting = true;
            this.countDown();
          } else {
            this.$api.msg(res.msg);
          }
        });
    },
    // 倒计时
    countDown() {
      if (this.miao > 0) {
        setTimeout(() => {
          this.miao--;
          this.countDown();
        }, 1000);
      } else {
        this.counting = false;
        this.miao = 60;
      }
    },
    // 注册提交
    register() {
      if (!this.mobile || this.mobile.length !== 11) {
        this.$api.msg('请输入正确的手机号');
        return;
      }
      if (!this.code) {
        this.$api.msg('请输入验证码');
        return;
      }
      if (!this.password || this.password.length < 6) {
        this.$api.msg('请设置至少6位密码');
        return;
      }
      
      // 调用注册接口
      this.$api.http.post('/user/register', {
        mobile: this.mobile,
        code: this.code,
        password: this.password
      }).then(res => {
        if (res.status === 1) {
          this.$api.msg('注册成功');
          // 保存token并跳转首页
          uni.setStorageSync('token', res.data.token);
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/index/index'
            });
          }, 1000);
        } else {
          this.$api.msg(res.msg);
        }
      });
    }
  }
};
</script>

<style lang="less">
.register {
  padding-top: 100px;
  .head { font-size: 22px; padding: 20px; }
  .tou { text-align: center; }
  .tou img { width: 64px; height: 64px; }
  .con { padding: 20px 30px; }
  .con_01 { border-bottom: 2px solid #F7F7F7; padding-top: 20px; display: flex; }
  .con_01_l { width: 40px; text-align: center; padding: 0px 0 5px; }
  .con_01_r { flex-grow: 1; padding-right: 10px; }
  input::-webkit-input-placeholder { color: #D2D2D2; }
  .con_04_1 { 
    background-color: #E61874; 
    color: #ffffff; 
    border-radius: 25px; 
    height: 35px; 
    line-height: 35px; 
    font-size: 14px; 
    text-align: center;
    border: 1px solid #F0F0F0; 
    width: 100%;
  }
  .con_05 { color: #F78674; font-size: 14px; }
  .con_02 { 
    border-bottom: 2px solid #F7F7F7; 
    padding-top: 15px; 
    display: flex; 
    justify-content: space-between;
  }
  .con_02_t { 
    background-color: #E0441D; 
    color: #fff; 
    height: 30px; 
    line-height: 30px; 
    border-radius: 20px; 
    padding: 0 20px; 
    margin-bottom: 5px; 
    font-size: 28upx;
  }
  .con_02_r { flex-grow: 1; padding-right: 10px; margin-top: 5px; }
  .con_02_l { width: 40px; text-align: center; padding: 5px 0 5px; }
}
</style>